<template>
  <v-container
    class="grey lighten-5"
    xs12
    md10
  >
    <v-container
      class="white text-center mt-10 "
      xs4
      md8
    >
      <p class="text-h4">
        消费者满意度
      </p>
    </v-container>

    <v-container
      class="white"
      md8
      xs4
    >
      <p class="text-subtitle-1 width:100%">
        为了给您提供更好的服务，希望您能抽出几分钟时间，将您的感受和建议告诉我们，我们非常重视每位用户的宝贵意见，期待您的参与！现在我们就马上开始吧！
      </p>
      <div
        v-for='(item,index) in questionList'
        :key="index"
      >
        <v-row v-if="item.symbol!='填空'">
          <v-col cols="12">
            <p class="mt-6"><span class="font-weight-black text-h6">{{item.id}}</span><span class="text-h6 ml-3">{{item.title}}</span><span class="red--text ml-2">*</span>
              <span
                v-if="item.symbol=='多选'"
                class="grey lighten-3 ml-3"
                height="40px"
                width="80px"
              >多选</span>
            </p>
          </v-col>
        </v-row>

        <!--单选-->

        <v-radio-group
          class="pl-3"
          v-if="item.type=='单选'"
        >
          <v-radio
            v-for="n in item.chooseList"
            :key="n"
            :label="`${n}`"
            :value="`${n}`"
          ></v-radio>
        </v-radio-group>
        <!--选择-->
        <v-row v-if="item.type=='选择'">
          <v-col
            class="d-flex"
            md="3"
            xs="6"
          >
            <v-combobox
              class="pl-3"
              :items="item.chooseList"
              outlined
              label="请选择"
              full-width
              dense
            ></v-combobox>
            <!--  <v-select class="pl-3"
              :items="item.chooseList"
              label="请选择"
              outlined
              dense
              full-width
            ></v-select>-->
          </v-col>
        </v-row>
        <!--多选-->
        <div
          v-if="item.type=='多选'"
          class="pb-3"
        >
          <v-checkbox
            class="pl-3"
            hide-details
            v-for="n in item.chooseList"
            :key="n"
            :label="`${n}`"
            :value="`${n}`"
          ></v-checkbox>
        </div>
        <!--单行文本-->
        <div v-if="item.type=='单行文本'">
          <v-text-field
            label="请输入"
            placeholder="请输入"
            outlined
            full-width
            dense
          ></v-text-field>

        </div>
        <!--多行文本-->
        <v-textarea
          v-if="item.type=='多行文本'"
          outlined
          full-width
          label="请输入"
        ></v-textarea>
        <!--表格-->
        <v-simple-table v-if="item.type=='表格（单）'">
          <thead>
            <tr>
              <th></th>
              <th
                v-for='(item,index) in item.selectList'
                :key="index"
              >
                <span>{{item}}</span>
              </th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>{{item.question1}}</td>
              <td><input
                  type="radio"
                  name="one"
                ></td>
              <td><input
                  type="radio"
                  name="one"
                ></td>
              <td><input
                  type="radio"
                  name="one"
                ></td>
            </tr>
            <tr>
              <td>{{item.question2}}</td>
              <td><input
                  type="radio"
                  name="two"
                ></td>
              <td><input
                  type="radio"
                  name="two"
                >
              </td>
              <td><input
                  type="radio"
                  name="two"
                >
              </td>
            </tr>
            <tr>
              <td>{{item.question3}}</td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
          </tbody>
        </v-simple-table>

        <v-simple-table v-if="item.type=='表格（多）'">
          <thead>
            <tr>
              <th></th>
              <th
                v-for='(item,index) in item.selectList'
                :key="index"
              >
                <span>{{item}}</span>
              </th>
            </tr>
          </thead>
          <tbody>
            <tr
              v-for='(item,index) in item.question'
              :key="index"
            >
              <td>{{item}}</td>
              <td>
                <v-checkbox></v-checkbox>
              </td>
              <td>
                <v-checkbox></v-checkbox>
              </td>
            </tr>
          </tbody>
        </v-simple-table>
        <!--上传文件-->
        <div v-if="item.type=='文件'">

        </div>

        <!--填空-->
        <v-row v-if="item.symbol=='填空'">
          <v-col cols="7">
            <p class="mt-6"><span class="font-weight-black text-h6">{{item.id}}</span><span class="text-h6 ml-3">{{item.title}}</span>
            </p>
          </v-col>
          <v-col cols="1">
            <v-text-field
              dense
              full-width
            ></v-text-field>
          </v-col>
          <v-col cols="3">
            <v-text-field
              dense
              full-width
            ></v-text-field>

          </v-col>
          <div class="red--text py-1">*</div>
        </v-row>
        <!--按钮组-->
        <div v-if="item.type=='按钮组'">
          <v-row
            justify="space-between"
            style="width:420px"
            class="ml-1"
          >
            <span>非常满意</span>
            <span>非常不满意</span>
          </v-row>
          <v-row>
            <v-col
              cols="6"
              xm="12"
            >
              <v-btn-toggle
                borderless
                tile
                color="blue"
              >
                <v-btn
                  value="1"
                  width="80px"
                  color="grey lighten-2"
                >
                  1
                </v-btn>
                <v-btn
                  value="2"
                  width="80px"
                  class="ml-1"
                  color="grey lighten-2"
                >
                  2
                </v-btn>
                <v-btn
                  value="3"
                  width="80px"
                  class="ml-1"
                  color="grey lighten-2"
                >
                  3
                </v-btn>
                <v-btn
                  value="4"
                  width="80px"
                  class="ml-1"
                  color="grey lighten-2"
                >
                  4
                </v-btn>
                <v-btn
                  value="5"
                  width="80px"
                  class="ml-1"
                  color="grey lighten-2"
                >
                  5
                </v-btn>
              </v-btn-toggle>

            </v-col>
          </v-row>
        </div>

      </div>
    </v-container>

  </v-container>
</template>

<script>
import axios from 'axios'
export default {
  mounted() {
    /*   this.add();
     },
     methods:{
      async add(){
        await axios.get('http://localhost:8080/temp.json').then((response)=>{
       console.log(response.data)
        })
      }*/
   axios({
      method: 'get',
      url: '/temp.json',
    }).then(res => {
      console.log(res.data);
      console.log(res.status);
      console.log(res.statusText);
      console.log(res.headers);
      console.log(res.config);
    }, err => {
      console.log(err);
    })
  },
  data() {

    return {
      questionnaire_id: "87236",
      questionList: [

        {
          type: '单选',
          title: '您的年龄',
          chooseList: [
            '20岁以下',
            '21-25岁',
            '26-30岁',
            '40岁以上'
          ],
          id: "01",
          symbol: " "
        },
        {
          type: '选择',
          title: '您是餐饮店业者吗？',
          chooseList: [
            '是',
            '否',
          ],
          id: "02",
          symbol: " "
        },
        {
          type: '多选',
          title: '近三个月，您去餐厅就餐的次数',
          chooseList: [
            '2次以下',
            '3-5次',
            '6-10次',
            '10次以上'
          ],
          id: "03",
          symbol: "多选"
        },
        {
          type: '单行文本',
          title: '您对xx餐厅“员工态度好”的满意程度是',
          chooseList: [
            null
          ],
          id: "04",
          symbol: " "
        },
        {
          type: '多行文本',
          title: '您对xx餐厅“员工会及时提供服务”的满意程度是',
          chooseList: [
            null
          ],
          id: "05",
          symbol: " "
        },
        {
          type: '表格（单）',
          title: '您对xx餐厅“员工服装仪容干净”的满意程度是',
          selectList: [
            "选项1",
            "选项2",
            "选项3",
          ],
          question1: "问题1",
          question2: "问题2",
          question3: "问题3",
          id: "06",
          symbol: " "
        },
        {
          type: '表格（多）',
          title: '您对xx餐厅“室内外清洁干净”的满意程度是',
          selectList: [
            "选项1",
            "选项2",
          ],
          question: [
            "问题1",
            "问题2",
          ],
          id: "07",
          symbol: "多选"

        },
        {
          type: '',
          title: '您对xx餐厅“店内环境气氛好”的满意程度是',
          selectList: [
            "选项1",
            "选项2",
          ],
          question: [
            "问题1",
            "问题2",
          ],
          id: "08",
          symbol: ""

        },
        {
          type: '文件',
          title: '您对xx餐厅“餐具洁净完整”的满意程度是',
          chooseList: [
            null
          ],
          id: "10",
          symbol: " "
        },
        {
          type: '按钮组',
          title: '您对xx餐厅“价格适中”的满意程度是',
          chooseList: [
            null
          ],
          id: "11",
          symbol: " "
        },
        {
          type: '填空',
          title: '您对xx餐厅“菜品/饮品安全”的满意程度是',
          chooseList: [
            null
          ],
          id: "13",
          symbol: "填空"
        },
        {
          type: '按钮组',
          title: '您对xx餐厅“价格适中”的满意程度是',
          chooseList: [
            null
          ],
          id: "14",
          symbol: " "
        },
        {
          type: '选择',
          title: '您对xx餐厅“菜单清楚”的满意程度是',
          chooseList: [
            '一星',
            '二星',
            '三星',
          ],
          id: "15",
          symbol: " "
        },
        {
          type: '按钮组',
          title: '您对xx餐厅“消费细目列式清楚”的满意程度是',
          chooseList: [
            null
          ],
          id: "16",
          symbol: " "
        },
        {
          type: '按钮组',
          title: '您对xx餐厅“点餐等候时间短”的满意程度是',
          chooseList: [
            null
          ],
          id: "17",
          symbol: " "
        },
        {
          type: '按钮组',
          title: '您对xx餐厅“上菜快速”的满意程度是',
          chooseList: [
            null
          ],
          id: "18",
          symbol: " "
        },
        {
          type: '按钮组',
          title: '您对xx餐厅“食物美味可口”的满意程度是',
          chooseList: [
            null
          ],
          id: "19",
          symbol: " "
        },

        {
          type: '按钮组',
          title: '您对xx餐厅“结帐速度快/效率高”的满意程度是',
          chooseList: [
            null
          ],
          id: "20",
          symbol: " "
        },
        {
          type: '按钮组',
          title: '您对xx餐厅“营业时间合理”的满意程度是',
          chooseList: [
            null
          ],
          id: "21",
          symbol: " "
        },
        {
          type: '按钮组',
          title: '您对xx餐厅“地点近或分店多”的满意程度是',
          chooseList: [
            null
          ],
          id: "22",
          symbol: " "
        },
        {
          type: '按钮组',
          title: '您对xx餐厅“停车方便”的满意程度是',
          chooseList: [
            null
          ],
          id: "23",
          symbol: " "
        },
        {
          type: '单行文本',
          title: '您对xx餐厅“客人投诉/反馈能及时处理”的满意程度是',
          chooseList: [
            null
          ],
          id: "24",
          symbol: " "
        },
        {
          type: '按钮组',
          title: '您对xx餐厅“促销多/折扣大”的满意程度是',
          chooseList: [
            null
          ],
          id: "25",
          symbol: " "
        },
        {
          type: '按钮组',
          title: '您对xx餐厅“口碑推荐”的满意程度是',
          chooseList: [
            null
          ],
          id: "26",
          symbol: " "
        },

      ],
    }
  },


}
</script>

